<template>
	<view class="container" style="height: 100vh;background-color: aliceblue;">
		<!-- 头部搜索栏 -->
		<view class="header">

		</view>
		<!-- 焦点图区域 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<view class="swiper-item">
						<image :src="baseUrl+item.image_url" style="width: 100%; height: 150px;" mode=""></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<!-- 分区栏 -->
			<uni-group title="热门功能" margin-top="">

				<!-- 内容主体，可自定义内容及样式 -->
				<view class="type">
					<view class="flexbox">
						<view @click="tiao(index)" class="" v-for="index in feature">
							<image style="width: 75%" :src="baseUrl+index.featureIcon" mode="widthFix"></image>
							<view class="">{{index.featureTitle}}</view>
						</view>
					</view>
				</view>
			</uni-group>
		<!-- 课程推荐栏 -->
	<uni-group title="热门直播" margin-top="">
		<view @click="webcast" class="class">
			<classs :duration="videos.duration" :title="videos.title" :video_img="videos.video_img" ></classs>
		</view>
	</uni-group>
		<!-- 考试消息栏 -->
	<uni-group title="热门新闻" margin-top="">
		<view class="news">
			<u-tabs :list="list1" @change="change">
			</u-tabs>
			<news v-for="(item,index) in news" :key="index" :title="item.title" :author_img="item.author_img" :author="item.author"  :content="item.content"></news>
		</view>
	</uni-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:'http://127.0.0.1:8081/',
				banners:[],
				list1: [{
				            name: '关注',
				        }, {
				            name: '推荐',
				        }, {
				            name: '电影'
				        }, {
				            name: '科技'
				        }, {
				            name: '音乐'
				        }, {
				            name: '美食'
				        }, {
				            name: '文化'
				        }, {
				            name: '财经'
				        }, {
				            name: '手工'
				        }],
				feature:[],
				medal:[],
				news:[],
				newscate:[],
				videos:[]
			}
		},
		onLoad(){
			this.getclassifyicon()
			this.getbanners()
		},
		methods: {
			async change(e){
				console.log(e.index)
				const data2=await this.$request.getnews()
				this.news=data2.data.data
				this.news=this.news.filter(item=>{
					console.log(item.category_id)
					return item.category_id==e.index+1
				})
			},
			async getbanners(){
				const data=await this.$request.getbanner()
				this.banners=data.data.data
				const data1=await this.$request.getfeature()
				this.feature=data1.data.data
				const data2=await this.$request.getnews()
				this.news=data2.data.data
				console.log(this.news)
				const data4=await this.$request.getvideos()
				this.videos=data4.data.data[0]
				console.log(this.videos)
				const data3=await this.$request.getnewcategory()
				this.newscate=data3.data.data
				this.list1.forEach((item,index)=>{
					item.name=this.newscate[index].category_name
				})
			},
			webcast(){
				console.log(1)
				uni.navigateTo({
					url:"/pages/index/classlist/void?video_id="+this.videos.videoID_category
				})
			},
			touch(){
				uni.navigateTo({
					url:"/pages/index/newsinfo"
				})
			},
			tiao(index){
				console.log(index)
				switch(index){
					case 1:uni.navigateTo({
						url:"/pages/index/classlist/classlist"
					});break;
					case 2:uni.navigateTo({
						url:"/pages/index/classlist/classlist"
					});break;
					case 3:uni.navigateTo({
						url:"/pages/index/news"
					});break;
					case 4:uni.navigateTo({
						url:"/pages/index/resourse/resourse"
					});break
				}
			},
		async getclassifyicon(){
			const res=await uniCloud.callFunction({
				name:"classifyicon"
			})
			console.log(res)	
			},
click(){}
		}
	}
</script>

<style>
	.flexbox{
		text-align: center;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr; 
	}
	.news{
		margin-top: 50rpx;
	}
	.type{
		margin-top: 10px;
	}
	.flextype{
		display: flex;
		justify-content: space-around;
	}
	.container {
		width: 94%;
		margin: 5px auto;
		background-color: goldenrod;
	}
</style>
